<template>
  <div>
    <Search :value="searchValue" @changeSearch="changeSearch"></Search>
    <!--主内容-->
    <div class="container">
      <el-row>
        <el-col :span="24">
          <el-card class="border-radius mg-t-20">
            <div slot="header">
              <span class="fs-14">共找到 <span class="f-red-color">{{ total }}</span> 条结果</span>
            </div>
            <Links ref="Links" :isPage="true" emptyText="抱歉，未找到您想要的结果" @changeTotal="changeTotal" :searchKey="searchValue" :listSize="48"></Links>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import {mapState} from "vuex";

export default {
  layout: "navigation",
  computed: {
    ...mapState({
      nav_config: state => state.config
    })
  },
  //SEO优化
  head(){
    return{
      title: "搜索结果" + this.nav_config.separate + this.$route.query.keys + this.nav_config.separate + this.nav_config.name,
      meta: [
        { name: 'keywords', content: this.nav_config.keywords + "," + this.$route.query.keys },
        { hid: 'description', name: 'description', content: this.nav_config.description },
      ]
    }
  },
  data(){
    return{
      searchValue: null,
      total: 0
    }
  },
  created() {
    if(this.$route.query.keys){
      this.searchValue = this.$route.query.keys;
    }else{
      this.$router.push("/error");
    }
  },
  mounted() {
    if(this.$route.query.keys){
      // 调用子组件方法
      this.$refs.Links.searchKeyChange(this.$route.query.keys);
    }
  },
  methods:{
    //获取搜索结果总数
    changeTotal(val){
      this.total = val;
    },
    //获取搜索框中的值
    changeSearch(val){
      this.searchValue = String(val);
      this.$nextTick(() => {
        // 调用子组件方法
        this.$refs.Links.searchKeyChange(val);
      });
    }
  }
}
</script>
